<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">
		<z-paging ref="paging" v-model="list" @query="queryList" :fixed="false">
			<view class="pd30 item df" v-for="i in list">
				<view class="icon">
					{{i.id}}
				</view>
				<view class="info">
					<view class="title">
						{{i.title}}
					</view>
					<view class="num">
						时长：{{i.duration}}
					</view>
				</view>
				<view class="edit" @click.stop="handelClick(i)">
					<u-icon name="more-dot-fill" color="#fff" size="21"></u-icon>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				// dataList: [],
				list: [],
				firstLoaded: false,
				isExpansion: false,
			}
		},
		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					console.log('cutt', newVal, this.tabIndex);
					if (newVal === this.tabIndex) {
						//懒加载，当滑动到当前的item时，才去加载
						if (!this.firstLoaded) {
							this.$nextTick(() => {
								setTimeout(() => {
									this.$refs.paging.reload();
								}, 100);
							})
						}
					}
				},
				immediate: true
			},
		},
		methods: {
			queryList(pageNo, pageSize) {
				/* this.$refs.paging.complete(this.list);
				this.firstLoaded = true;
				return */
				const params = {
					page: pageNo,
					limit: pageSize,
				}
				this.$api.info(params).then(res => {
					this.$refs.paging.complete(res.data.list);
					this.firstLoaded = true;
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			handelClick(i) {
				uni.showActionSheet({
					itemList: ['查看弹幕互动', '移除该讲解话术'],
					success: (res) => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						switch (res.tapIndex) {
							case 0:
								this.$tools.navTo('audio/interaction?id=' + i.id)
								break;
							case 1:
								this.delItem(i)
								break;
							default:
								break;
						}
					},
					fail(res) {
						console.log(res.errMsg);
					}
				});
			},
			itemClick(item) {
				console.log(111111);
				uni.navigateTo({
					// url: '/pages/index/detail/detail?id=' + item.id
					url: '/pages/webview/webview'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.content {
		height: 100%;
	}

	.item:last-child {
		margin-bottom: 0;
	}

	.item {
		background: #ffffff;
		border-radius: 50rpx;
		margin: 0 30rpx 30rpx;
		align-items: center;

		.info {
			font-size: 30rpx;
			width: 70%;

			.num {
				font-size: 26rpx;
				color: #999;
			}
		}

		.edit {
			transform: rotate(90deg);
		}

		.icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50px;
			background: #45516d;
			color: #6468ff;
			line-height: 60rpx;
			text-align: center;
			font-family: fantasy;
			margin-right: 40rpx;
		}

		/deep/.u-count-down__text {
			color: #fff !important;
			margin-top: 16rpx;
			font-size: 34rpx;
		}
	}
</style>